<template>
  <div class="logistics-trace">
    <h2>物流跟踪</h2>
    <ul class="trace-details">
      <li v-for="(ele,index) in traceArr" :key="index" class="clearfix">
        <div>
          ●
        </div>
        <div class="details-order-over">
          <p>{{ele.title}}</p>
          <p>{{ele.time}}</p>
        </div>
      </li>
      <div class="trace-sure-accept">
        <span>确认收货</span>
        
      </div>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'Trace',
    data () {
      return {
        //物流跟踪信息
        traceArr:[
          {
            title: '你的订单已完成',
            time:'2016-12-01  12:00'
          },
          {
            title: '你的订单已完成',
            time:'2016-12-01  12:00'
          },
          {
            title: '你的订单已完成',
            time:'2016-12-01  12:00'
          },
        ]
      }
    }
  }
</script>

<style scoped>
.logistics-trace{
  font-size: 0.26rem;
}
.logistics-trace h2{
  margin: 0.8rem 0 0.15rem 0.2rem;
}
.trace-details{
  background-color: #fff; 
}
.trace-details li{
  height: 1.2rem;
  box-sizing: border-box;
  border-bottom: 0.02rem solid #a1a1a1;
}
.trace-details li>div{
  float: left;
}
.trace-details li>div:first-child{
  width: 0.76rem;
  height: 100%;
  line-height: 1.2rem;
  text-align: center;
  
}
.trace-details li>div:last-child{
  padding-top: 0.25rem;
}
.details-order-over p:first-child{
  padding-bottom: 0.1rem;
}
/*确认收货*/
.trace-sure-accept{
  text-align: center;
  font-size: 0.3;
  color: #fff;
  background-color: #FFF;
  padding: 0.6rem 0;
 
}
.trace-sure-accept span{
  display: inline-block;
  width: 5.12rem;
  height: 0.77rem;
  line-height: 0.77rem;
  background-color: #13bf92;
  border-radius: 0.08rem;
}


</style>